<template>
  <!-- 订单一览表 -->
  <div class="order-list">
    <el-row :gutter="20">
      <el-col :span="4">
        <tree @treeClick="treeClick" />
      </el-col>
      <el-col :span="20">
        <div style="padding: 20px;">
          <el-form :model="searchData" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="选择订单生成日期范围" label-width="160px">
                  <div style="display: flex">
                    <el-date-picker
                      style="margin-right: 40px"
                      v-model="searchData.workArea"
                      type="datetimerange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-button>今天</el-button>
                    <el-button>本周</el-button>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单编号">
                  <el-input
                    v-model="searchData.name"
                    placeholder="请输入订单编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="料单编号">
                  <el-input
                    v-model="searchData.name"
                    placeholder="请输入料单编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最新状态">
                   <el-select v-model="searchData.region" placeholder="请选择最新状态">
                      <el-option label="状态一" value="1"></el-option>
                      <el-option label="状态二" value="2"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="料单名称">
                  <el-input
                    v-model="searchData.name"
                    placeholder="请输入料单名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单生成时间">
                  <el-date-picker
                    style="width: 100%"
                    v-model="searchData.workArea"
                    type="datetimerange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-button>查询</el-button>
                <el-button>重置</el-button>
              </el-col>
            </el-row>
          </el-form>

          <div>
            <div style="margin: 20px 0;font-weight: 400;font-size: 16px;color: #101010;">订单数量总计：1份</div>

            <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
              <el-table-column label="序号" width="55" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="订单编号" align="center">
                <template v-slot="scope">
                  <el-button type="text" @click="seeOrderTable(scope.row)">{{ scope.row.name }}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="料单编号" align="center">
                <template v-slot="scope">
                  <el-button type="text" @click="seeMaterialListTable(scope.row)">{{ scope.row.name }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="分部分项" align="center"></el-table-column>
              <el-table-column prop="name" label="料单名称" align="center"></el-table-column>
              <el-table-column prop="name" label="重量(t)" align="center"></el-table-column>
              <el-table-column prop="date" label="需用日期" align="center"></el-table-column>
              <el-table-column prop="date" label="订单生成日期" align="center"></el-table-column>
              <el-table-column label="最新状态" align="center">
                <template v-slot="scope">
                  <el-button type="text" @click="seeTable(scope.row)">{{ scope.row.name }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="料单排产" align="center"></el-table-column>
              <el-table-column prop="date" label="加工状态" align="center"></el-table-column>
              <el-table-column prop="date" label="配送出场" align="center"></el-table-column>
              <el-table-column prop="date" label="到场签收" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <latest-status ref="latestStatus" />
    <order-details ref="orderDetails" />
    <material-list-details ref="materialListDetails" />
  </div>
</template>

<script>
import tree from "../components/tree.vue";
import latestStatus from "./dialog/latest-status.vue"
import orderDetails from "./dialog/order-details.vue"
import materialListDetails from "./dialog/material-list-details.vue"

export default {
  name: "OrderList",
  components: { tree, latestStatus, orderDetails, materialListDetails },
  props: {},
  data() {
    return {
      searchData: {},
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          value: '1'
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    treeClick(data) {
      console.log(data);
      console.log(this.activeName);
    },
    seeOrderTable(row) {
      console.log(row)
      this.$refs.orderDetails.see()
    },
    seeMaterialListTable(row) {
      console.log(row)
      this.$refs.materialListDetails.see()
    },
    seeTable(row) {
      console.log(row)
      this.$refs.latestStatus.see()
    },
  },
};
</script>

<style scoped lang="scss">
.order-list {
  padding: 20px;
}
</style>
